import { creatCustomer, updateCustomer } from "@/services/customer/custom_api";
import {
  ModalForm,
  ProForm,
} from "@ant-design/pro-components";
import dayjs from 'dayjs';
import { Tabs, Card } from "antd";
import React, { useState, useEffect, } from "react";
import { FormattedMessage, useIntl, useModel } from "@umijs/max";
// import { useIntl } from "umi";
import { TruckOrderVo } from "../../types"
import type { UploadFile } from 'antd';
import InfoForm from './InfoForm'
import BoxListApp from "./BoxList";
import TrackListApp from "./TrackList";
import FeeListApp from "./FeeList";
import LogListApp from "./LogList";
import OrderBolApp from "./OrderBol";




interface CreateModalProps {
  visible: boolean;
  values: TruckOrderVo;
  onCancel: () => void;
  onSuccess: () => void;
}
const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};
const AddForm: React.FC<CreateModalProps> = ({
  visible,
  values,
  onCancel,
  onSuccess,
}) => {
  const [form] = ProForm.useForm<TruckOrderVo>();
  const intl = useIntl();
  const [validPeriodDateFor, setValidPeriodDateFor] = useState<string>('');
  const [validPeriodDateTo, setValidPeriodDateTo] = useState<string>('');
  // const [updateStatus, setUpdateStatus] = useState<boolean>(false);
  const [editStatus, setEditStatus] = useState<boolean>(false);
  const [tabChoice, setTabChoice] = useState<string>("INFO");
   const { initialState } = useModel("@@initialState");
    const { currentUser } = initialState || {};
    const [admin, setAdmin] = useState(currentUser?.isAdmin);


  const resetAllAfterCloseModal = () => {
    form.resetFields();
    setFileList([]);
  }


  const [fileList, setFileList] = useState<UploadFile[]>([]);

  

  const initUpload = (url: string, name: string) => {
    const uploadedFile: UploadFile = {
      uid: String(Date.now()),
      name: name,
      status: 'done',
      url: url,
    };

    // 更新 fileList 和 form 字段值
    const updatedList = [uploadedFile];
    setFileList(updatedList);
  }

  const cancleModel = () => {
    resetAllAfterCloseModal();
    onCancel();
  }

  const tabItems = [
    {
      key: 'INFO',
      label: intl.formatMessage({ id: 'pages.order.tabs.basicInfo' }),
    },
    {
      key: 'ORDER_LOG',
      label: intl.formatMessage({ id: 'pages.order.tabs.orderLog' }),
    },
    {
      key: 'FEE',
      label: intl.formatMessage({ id: 'pages.order.tabs.feeDetails' }),
    },
    {
      key: 'BOX',
      label: intl.formatMessage({ id: 'pages.order.tabs.goodsInfo' }),
    },
    {
      key: 'BOL',
      label: intl.formatMessage({ id: 'pages.order.tabs.bolInfo' }),
    },
    {
      key: 'TRACKING',
      label: intl.formatMessage({ id: 'pages.order.tabs.logistics' }),
    },
  ];

  const TabChanged = (value: any) => {
    // console.log("choice tab:" + value);
    setTabChoice(value);
  }

  return (
    <ModalForm<TruckOrderVo>
      title={values?.orderCode ? values?.orderCode : "null" + intl.formatMessage({ id: 'pages.order.info' })}
      width="70%"
      form={form}
      open={visible}
      onOpenChange={(visible) => !visible && cancleModel()}
      // onFinish={handleSubmit}
      // onValuesChange={handleValuesChange} // 监听值变化
      autoFocusFirstInput
      modalProps={{
        destroyOnClose: true,
        maskClosable: false,
      }}
      submitter={false}

      layout="horizontal"
      {...formItemLayout}
    >

      <Tabs onChange={TabChanged}
        defaultActiveKey="INFO">
       <Tabs.TabPane tab={tabItems[0].label} key={tabItems[0].key}>
            <Card
              bordered={false}
              style={{ margin: -16 }} // 消除Card与Tab之间的间距
            >
              <InfoForm value={values || {}}></InfoForm>
            </Card>
          </Tabs.TabPane>
          {admin && (<Tabs.TabPane tab={tabItems[1].label} key={tabItems[1].key}>
            <Card
              bordered={false}
              style={{ margin: -16 }} // 消除Card与Tab之间的间距
            >
              <LogListApp data={values}></LogListApp>
            </Card>          
          </Tabs.TabPane>)
          }
          <Tabs.TabPane tab={tabItems[2].label} key={tabItems[2].key}>
            <Card
              bordered={false}
              style={{ margin: -16 }} // 消除Card与Tab之间的间距
            >
              <FeeListApp data={values}></FeeListApp>
            </Card>
          </Tabs.TabPane>
          <Tabs.TabPane tab={tabItems[3].label} key={tabItems[3].key}>
            <Card
              bordered={false}
              style={{ margin: -16 }} // 消除Card与Tab之间的间距
            >
              <BoxListApp data={values}></BoxListApp>
            </Card>
          </Tabs.TabPane>
          <Tabs.TabPane tab={tabItems[4].label} key={tabItems[4].key}>
            <Card
              bordered={false}
              style={{ margin: -16 }} // 消除Card与Tab之间的间距
            >
              <OrderBolApp data={values}></OrderBolApp>
            </Card>
          </Tabs.TabPane>
          <Tabs.TabPane tab={tabItems[5].label} key={tabItems[5].key}>
            <Card
              bordered={false}
              style={{ margin: -16 }} // 消除Card与Tab之间的间距
            >
              <TrackListApp data={values}></TrackListApp>
            </Card>
          </Tabs.TabPane>
      </Tabs>




    </ModalForm>
  );
};

export default AddForm;
